<template>
	<view class="commodityDetails">
		<view>
			<view class="imageAndGrade">
				<view class="productName">{{productInfo.productName}}</view>
				<view class="commodityImages">
					<image :src="productInfo.productPic" mode="heightFix"></image>
					<!-- <image src="../../static/tom.gif" mode=""></image> -->
				</view>
				<!-- <view class="grade">
					<view class="gradeItem">
						追溯评分：<text>{{productInfo.productTraceRate}}</text>分
					</view>
					<view class="line"></view>
					<view class="gradeItem">
						用户评分：<text>{{productInfo.productUserRate}}</text>分
					</view>
				</view> -->
			</view>
			<view class="productInfo">
				<view class="productInfo_content">
					{{productInfo.productExplain}}
				</view>
				<view class="traceabilityInfo_detail">
					<view class="">企业名称：{{productInfo.productCompany}}</view>
					<view class="">企业地址：{{productInfo.productCompanyAddress}}</view>
					<view class="">已检项目：<view v-for="(item,index) in checkList" :key="index">{{item.checkName}}<image v-if="item.checkName" src="/static/rz.png" mode=""></image></view>
					</view>
					<view class="">产品认证：
						<view v-for="(item,index) in certificateList" :key="index">{{item.certificateOrgan}}<image v-if="item.certificateOrgan" src="/static/rz.png" mode=""></image></view>
						<!-- <view>ISO：9000认证 <image src="/static/rz.png" mode=""></image></view> -->
					</view>
					<view class="">原料产地：{{productInfo.productMaterialAddress}}</view>
				</view>
			</view>
			<view class="traceabilityInfo">
				<view class="table">
					<view class="table_item">
						<view class=""><image src="/static/cpxx.png" mode="" @click="goPage('/pages/index/productInformation?productId='+id)"></image></view>
						<text>产品信息</text>
					</view>
					<!-- <view class="table_item">
						<view class=""><image src="/static/cyry.png" mode=""></image></view>
						<text>参与人员</text>
					</view> -->
					<view class="table_item">
						<view class=""><image src="/static/cprz.png" mode="" @click="goPage('/pages/index/productCertification?productId='+id)"></image></view>
						<text>产品认证</text>
					</view>
					<view class="table_item">
						<view class=""><image src="/static/rczy.png" mode="" @click="goPage('/pages/index/dailyWork?productId='+id)"></image></view>
						<text>日常作业</text>
					</view>
					<view class="table_item">
						<view class=""><image src="/static/zljc.png" mode="" @click="goPage('/pages/index/qualityTest?productId='+id)"></image></view>
						<text>质量检测</text>
					</view>
					<view class="table_item">
						<view class=""><image src="/static/ylsy.png" mode="" @click="goPage('/pages/index/rawMaterialSource?productId='+id)"></image></view>
						<text>原料溯源</text>
					</view>
					<!-- <view class="table_item">
						<view class=""><image src="/static/ssjc.png" mode="" @click="goPage('/pages/index/realTimeMonitoring')"></image></view>
						<text>实时监测</text>
					</view> -->
					<!-- <view class="table_item">
						<view class=""><image src="/static/zwyz.png" mode="" @click="goPage('/pages/index/authenticityVerification')"></image></view>
						<text>真伪验证</text>
					</view> -->
				</view>
			</view>
			<!-- <view class="grade_">
				<view class="grade_content">
					<view class="">
						<view class="grade_item">
							<view class="grade_item_title">追溯结果满意度</view>
							<uni-rate allow-half :value="productInfo.productTraceRate" @change="onChange1" />
						</view>
						<view class="grade_item">
							<view class="grade_item_title">用户体验满意度</view>
							<uni-rate allow-half :value="productInfo.productUserRate" @change="onChange2" />
						</view>
					</view>
					<view class="evaluateBtn" @click="evaluate">{{isEvaluate?'评价':countDown+'s'}}</view>
				</view>
			</view> -->
			<!-- 销售处 -->
			<view class="sellingDepartment" v-for="(item,index) in saleList" :key="index" v-show="false">
				<view class="sellingDepartment_title">销售门店：{{item.productName}}</view>
				<view class="introduce">
					<view class="">
						<image src="../../static/tom.gif" mode=""></image>
					</view>
					<view class="jianjie">
						简介： {{item.saleShopExplain}}
					</view>
				</view>
				<view class="lunbo1">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration">
						<swiper-item>
							<image src="../../static/tom.gif" mode=""></image>
						</swiper-item>
						<swiper-item>
							<image src="../../static/tom.gif" mode=""></image>
						</swiper-item>
						<swiper-item>
							<image src="../../static/tom.gif" mode=""></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			</view>
	</view>
</template>

<script>
	// 		 				产品信息			证书	   已检项目	销售门店		修改评分
	import {imgUrl,getProductInfo,getCertificate,getcheck,getSale	,EditEvaluate} from "../../api/api_test.js"
	export default {
		data() {
			return {
				productTraceRate:0,//追溯结果
				productUserRate:0,//用户体验
				indicatorDots: false,//指示点
				autoplay: true,//自动播放
				interval: 2000,//切换间隔
				duration: 500,//滑动动画时长
				circular: true,//简介滚动
				
				productInfo:{},
				certificateList:[],//证书列表
				checkList:[],//已检项目列表
				saleList:[],//销售门店
				imgUrl:imgUrl,
				
				isEvaluate:true,//是否可以评论
				countDown:10,//倒计时
				id:'',
			};
		},
		onLoad(options){
			this.id = uni.getStorageSync('id')
			
			this.getInfo()
			// 获取产品证书
			this.getProductCertificate()
			// 已检项目
			this.getcheckProduct()
			// 销售门店
			this.getSale()
		},
		methods:{
			getInfo(){
				getProductInfo(uni.getStorageSync('id'),res=>{
					console.log("res",res)
					if(res.code == 200){
						this.productInfo = res.data
						this.productInfo.productPic = this.imgUrl + this.productInfo.productPic
						console.log("this.productInfo.productPic",this.productInfo.productPic)
					}
				})
			},
			// 获取产品证书
			getProductCertificate(){
				getCertificate({certificateProduct:uni.getStorageSync('id')},res=>{
					console.log("res 获取产品证书",res)
					if(res.code == 200&&res.data){
						this.certificateList = res.data
					}
				})
			},
			// 已检项目
			getcheckProduct(){
				getcheck({checkProduct:uni.getStorageSync('id')},res=>{
					console.log("res 已检项目",res)
					if(res.code == 200&&res.data){
						this.checkList = res.data
					}
				})
			},
			// 销售门店
			getSale(){
				getSale({saleProduct:uni.getStorageSync('id')},res=>{
					console.log("res 销售门店",res)
					if(res.code == 200&&res.data){
						this.saleList = res.data
					}
				})
			},
			evaluate(){
				console.log("追溯结果",this.productTraceRate)
				console.log("用户体验",this.productUserRate)
				this.isEvaluate = false
				let timer = setInterval(()=>{
					this.countDown--
					if(this.countDown == 0){
						clearInterval(timer)
						this.isEvaluate = true
					}
				},1000)
				if(this.isEvaluate = true){
					let para = {
						productId:uni.getStorageSync('id'),
						productTraceRate:this.productTraceRate,
						productUserRate:this.productUserRate
					}
					EditEvaluate(para,res=>{
						console.log("res 修改评分",res)
						if(res.code == 200){
							this.getInfo()
						}
						
					})
				}
			},
			// 追溯结果
			onChange1(e){
				console.log("e",e)
				this.productTraceRate = e.value
			},
			// 用户体验
			onChange2(e){
				console.log("e",e)
				this.productUserRate = e.value
			},
			goPage(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.commodityDetails{
	flex: 1;
	background: url(../../static/maizi.png) no-repeat;
	background-size: 100% 100% ;
	>view{
		padding: 20rpx ;
		box-sizing: border-box;
		
		.imageAndGrade{
			padding: 50rpx 20rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			.productName{
				background: #76B3FC;
				color: #fff;
				font-size: 30rpx;
				text-align: center;
				line-height: 100rpx;
				border-radius: 10rpx;
				width: 100%;
			}
			.commodityImages{
				margin: 80rpx 0;
				background: #fff;
				width: 320rpx;
				height: 320rpx;
				border-radius: 50%;
				overflow: hidden;
				image{
					width: 320rpx;
					height: 320rpx;
				}
			}
			.grade{
				// margin-left: 50rpx;
				width: 100%;
				display: flex;
				align-items: center;
				background: #92C045;
				line-height: 100rpx;
				border-radius: 10rpx;
				color: #fff;
				.gradeItem{
					flex: 1;
					text-align: center;
					text{
						font-size: 32rpx;
						font-weight: bold;
						
					}
				}
				.line{
					height: 55rpx;
					border-left: 1px solid #fff;
				}
			}
			
			
		}
		.productInfo{
			padding: 40rpx 80rpx;
			box-sizing: border-box;
			.productInfo_content{
				font-size: 28rpx;
				color: #888888;
				border-bottom: 1px solid #E2E2E2;
				padding-bottom: 30rpx;
			}
			.traceabilityInfo_detail{
				margin-top: 30rpx;
				font-size: 28rpx;
				color: #888888;
				view{
					display: flex;
					align-items: center;
					line-height: 60rpx;
					flex-wrap: wrap;
					view{
						display: flex;
						align-items: center;
						margin-right: 20rpx;
						color: #36AB60;
						image{
							margin-left: 10rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}
		.traceabilityInfo{
			padding: 10rpx;
			border-bottom: 1px solid #E2E2E2;
			background: url(../../static/box1.png) no-repeat;
			background-size: 100% 100%;
			.table{
				display: flex;
				flex-wrap: wrap;
				// margin-top: 40rpx;
				.table_item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 33%;
					box-sizing: border-box;
					// border: 1px solid #D7D7D7;
					padding: 20rpx 0;
					view{
						width: 100rpx;
						height: 100rpx;
						overflow: hidden;
						border-radius: 50%;
						image{
							width: 100rpx;
							height: 100rpx;
						}
					}
					text{
						margin-top: 10rpx;
						font-size: 26rpx;
					}
				}
			}
		}
		.grade_{
			padding: 50rpx 0;
			// border-bottom: 1px solid #E2E2E2;

			.grade_content{
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 50rpx 0;
				font-size: 26rpx;
				background: rgba(255,255,255,.5);
				box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
				border-radius: 20rpx ;
				// opacity: 0.5;
				.grade_item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					line-height: 80rpx;
					.grade_item_title{
						color: #AAAAA9;
						// margin-right: 40rpx;
					}
					/deep/.uni-rate{
						.uni-rate__icon{
							margin: 0 10rpx !important;
						}
					}
				}
				.grade_item:first-child{
					border-bottom: 1px solid rgba(112, 112, 112, .5);
					padding-bottom: 15rpx;
				}
				// 评价按钮
				.evaluateBtn{
					width: 200rpx;
					text-align: center;
					padding: 10rpx 0;
					background: #76B3FC;
					border-radius: 20rpx;
					// margin-left: 50rpx;
					color: #fff;
					margin: 30rpx 0;;
				}
			}
			
		}
		.sellingDepartment{
			.sellingDepartment_title{
				font-size: 34rpx;
				font-weight: bold;
				margin: 30rpx 0;
			}
			.introduce{
				display: flex;
				image{
					width: 150rpx;
					height: 150rpx;
				}
				.jianjie{
					font-size: 28rpx;
					margin-left: 30rpx;
				}
			}
			.lunbo1{
				margin: 20rpx 0;
				swiper{
					height: 400rpx;
				}
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
